<script setup lang="ts">
import { useNav } from "@/layout/hooks/useNav";
import { computed } from "vue";

const props = withDefaults(
  defineProps<{
    size?: any;
    src?: string;
    name?: string;
    bgColor?: string;
  }>(),
  {
    size: 40
  }
);

const { username, userAvatar } = useNav();
const getAvatarSrc = computed(() => {
  if (props.src || props.name) {
    return props.src;
  }
  return userAvatar.value;
});
const userNameCap = computed(() => {
  if (props.name) {
    return props.name[0].toUpperCase();
  }
  if (!username.value) return "";
  return username.value[0].toUpperCase();
});
const avatarStyle = computed(() => {
  return {
    "--el-avatar-bg-color": props.bgColor
      ? props.bgColor
      : "var(--el-text-color-disabled)"
  };
});
</script>

<template>
  <el-avatar :src="getAvatarSrc" :size="size" fit="cover" :style="avatarStyle">
    {{ userNameCap }}
  </el-avatar>
</template>
<style lang="scss" scoped></style>
